<template>
  <el-container class="home-page">
    <el-header class="myHeader-nav">
      <el-row>
        <el-col :span="8">{{routeName}}</el-col>
        <el-col :span="8" :offset="8" style="text-align: right;"><span @click="logout" class="logout-btn">登出</span></el-col>
      </el-row>
      </el-header>
    <el-container>
      <!-- 导航栏部分 S -->
      <el-aside width="200px">
        <LeftNav />
      </el-aside>
      <!-- 导航栏部分 E -->
      <!-- 内容页部分 S -->
      <el-main v-if="forceFresh">
        <router-view></router-view>
      </el-main>
      <!-- 内容页部分 E -->
    </el-container>
  </el-container>
</template>

<script>
import LeftNav from '@/components/LeftNav'

export default {
  name: 'Home',
  components: {
    LeftNav
  },
  created () {
    this.routeName = this.$route.name
  },
  data () {
    return {
      routeName: '',
      forceFresh: true
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name !== from.name) {
        this._forceFresh()
      }

      if (to.name == '考试' || to.name == '练习') {
        if (to.query.checkmode) {
          this.routeName = `${to.name}详情`
        } else if (to.query.id) {
          this.routeName = `修改${to.name}`
        } else {
          this.routeName = `新增${to.name}`
        }
      } else {
        this.routeName = to.name
      }
    }
  },
  methods: {
    _forceFresh () {
      this.forceFresh = false
      this.$nextTick(() => {
        this.forceFresh = true
      })
    },
    logout () {
      this.$API.logout()
      .then(() => {
        localStorage.removeItem('userinfo')
        this.$router.replace('/')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.home-page .myHeader-nav { line-height: 60px; font-size: 20px; border-bottom: 1px #e6e6e6 solid; background: #0366bb; color: #fff; }
.home-page .logout-btn { font-size: 14px; cursor: pointer; text-decoration: underline; }
</style>
